<template>
	<view>
		<view class="viewTab " >
			<view class="tabBar top" :style="{'--color':color,backgroundColor:tabBar.bgColor}">
				<view class="list flex-1" v-for="(item,index) in tabBar.list" :key="index"
					:class="tab == item.id?'theme':'color_66'" @click="swichTab(item)">
					<view class="iconfont size40 m-bot4" :class="item.icon"></view>
					<text class="h6">{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>

</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: "tabBar",
		props:['tab'],
		data() {
			return {

			};
		},
		created() {
			uni.hideTabBar();
			if(!this.tab || !this.tabBar) return;
			const item = this.tabBar.list.find((n)=>n.id == this.tab);
			this.changeTab({tabTitle:item.title, tabId:item.id})
		},
		
		methods: {
			...mapMutations(['changeTab']),
			swichTab(item) {
				console.log('当前tab', item, this.tabId)
				if(this.tabId == item.id) return 
				// 某个分类
				if(item.id == 12){
					const path = `${item.path}?back=0&classId=${item.classId}`
					this.$rectTo(path);
					return;
				}
				// 订单
				if(item.id == 13){
					const path = `${item.path}?back=0`;
					this.$rectTo(path);
					return;
				}
				
				this.$rectTo(item.path);
			}
		},

		computed: {
			...mapState(['tabBar', 'color', 'tabId'])
		}
	}
</script>


<style lang="scss" scoped>
	.viewTab{
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabBar {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 77777;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.Cutoff {
		width: 100%;
		height: 360rpx;
		box-sizing: border-box;
	
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.theme {
		color: var(--color);
	}
</style>